import React, {PureComponent} from "react"
import "./index.less"
import { ArrowLeftOutlined } from '@ant-design/icons';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Breadcrumb, Divider, Drawer, Empty, Input, PageHeader, Spin } from "antd";
import {Link} from "react-router-dom"
import libraryCompose from "./compose"
import createFormItems from "./components/search-form-items"
import SearchAutoComplete from "libs/search-auto-complete"
import {GridView} from "./components/view"
import cs from "classnames";

const Search = Input.Search

/*
* 版型库
* **/
const form = Form.create()
const formItemLayout = {
	labelCol: {
		xs: {span: 24},
		sm: {span: 6},
	},
	wrapperCol: {
		xs: {span: 24},
		sm: {span: 17},
	},
}

const buttonStyle = {
	paddingLeft: '12px',
	paddingRight: '12px',
}

const routes = [
	{
		path: '/app/home',
		breadcrumbName: '主页',
	},
	{
		path: '/app/library',
		breadcrumbName: '版型库',
	},
]

@form
@libraryCompose
export default class SizeLibrary extends PureComponent {

	constructor(props) {
		super(props)
	}

	render() {
		const {
			drawerVisible,
			toggleDrawer,
			initData,
			dataSource,
			pagination,
			onFastSearch,
			onPageChange,
			loading,
			addFavorite,
			form
		} = this.props
		const closeDrawer = toggleDrawer(false)
		const {getFieldDecorator} = form
		return (
            <div className={'zr-panel'}>

				{/*<div className={'zr-panel-header'}>*/}
				{/*  <div>*/}
				{/*    <Breadcrumb>*/}
				{/*      <Breadcrumb.Item><Link to="/app/home">首页</Link></Breadcrumb.Item>*/}
				{/*      <Breadcrumb.Item>版型库</Breadcrumb.Item>*/}
				{/*    </Breadcrumb>*/}
				{/*    <PageHeader backIcon={<Icon type="arrow-left"/>}*/}
				{/*                onBack={() => window.history.back()} title={`版型库`}*/}
				{/*                subTitle={'快速浏览版型'}/>*/}
				{/*  </div>*/}
				{/*</div>*/}

				<div className={'ld2-library-page-box absolute no-header-box'}>
					<div className={cs('ld2-query-box compact')} style={{paddingRight: '20px'}}>
						<PageHeader backIcon={<ArrowLeftOutlined />}
						            onBack={() => window.history.back()} title={`版型库`}/>
						<div style={{flexGrow: 1}}/>
						<SearchAutoComplete allowClear={true} onSubmit={onFastSearch} placeholder={'请输入编码或系统编码查询'}/>
						<div style={{width: '45px'}}/>
					</div>

					{dataSource && dataSource.length > 0
						? <div className={'ld2-library-item-container'}>
							<GridView onAddFavorite={addFavorite} dataSource={dataSource} onChange={onPageChange}
							          pagination={pagination}/>
						</div>
						: <div className={'library-clothing-container empty-container'}>
							{loading
								? <Spin size="large"/>
								: <Empty imageStyle={{height: 80}} image={Empty.PRESENTED_IMAGE_SIMPLE}/>}
						</div>
					}

					<Drawer
						className={'library-drawer'}
						placement="right"
						closable={false}
						width={600}
						visible={drawerVisible}
						onClose={closeDrawer}
						getContainer={'#zr-app-container'}
					>
						<Divider>搜索条件</Divider>
						<Form className="clothing-form" {...formItemLayout}>
							{createFormItems({getFieldDecorator, initData})}
						</Form>
						<Divider>显示排序</Divider>
					</Drawer>
				</div>
			</div>
        );
	}
}


